<html lang="en" xmlns:th="http://www.thymeleaf.org"
	xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head th:replace="layout :: common_header(~{::title},~{},~{::style})">
    <title>角色详情</title>
    <style>
        #tblUser tr td:nth-child(odd) {
            font-weight: bold;
        }

        #tblUser tr td:nth-child(even) {
            /*background-color: #fff;*/
            font-size: 14px;
        }
    </style>
</head>
<body>
<div class="easyui-layout" style="width:100%;height:100%;">
<div class="easyui-layout" style="width:100%;height:100%;">
    <div data-options="region:'north',collapsed:false" style="height:40px;">
        <table id="tblUser" class="table table-bordered table-form">
            <tr>
                <td>角色名：</td>
                <td>[[${Model.RoleName}]]</td>
                <td>角色显示名：</td>
                <td>[[${Model.DisplayName}]]</td>
            </tr>
        </table>
    </div>
    <div data-options="region:'west',split:false,collapsed:false" title="角色下的权限" style="width: 300px;">
        <table id="dgMenu"></table>
    </div>
    <div data-options="region:'center',split:false,collapsed:false" title="角色下的用户">
        <table id="dgUser"></table>
    </div>

</div>
</div>

<th:block th:replace="layout :: scripts"/>
<script type="text/javascript">
    $(function () {
        InitDataGrid();

        InitPermissionTree();
    });
    let roleId = [[${roleId}]];
    let menuDataUrl = '/Role/GetUsersByRoleId';
    function InitDataGrid() {
        let $dataGrid = $('#dgUser').datagrid({
            url: menuDataUrl,
            queryParams : {
                'roleId' : roleId
            },
            method: 'post',
            idField: 'userId',
            striped: true,
            fitColumns: true,
            rowNumbers: true,
            singleSelect: true,
            pagination: false,
            nowrap: false,
            fit: true,
            showFooter: false,
            columns: [
                [
                    { field: 'memberId', title: '用户编号', width: 80, align: 'left' },
                    { field: 'userName', title: '用户名', width: 80, align: 'left' },
                    { field: 'displayName', title: '姓名', width: 100, align: 'left' },
                    { field: 'email', title: '邮箱', width: 120, align: 'left' },
                    { field: 'phoneNumber', title: '手机号', width: 80, align: 'left' },
                    { field: 'telephone', title: '座机号', width: 50, align: 'left' },
                    {
                        field: 'organizationNames', title: '所属部门', width: 80, align: 'left',
                        formatter: function (value, row, index) {
                            if (value != undefined && value != "") {
                                return value.substr(0, value.length - 1);
                            }
                            return value;
                        }
                    },
                    { field: 'positionLevelName', title: '部门岗位', width: 60, align: 'left' },
                    { field: 'status', title: '状态', width: 60,
                        formatter: function (value, row, index) {
                            if (value === "1") {
                                return "<span style='color:rgb(255, 0, 0);'>已冻结</span>";
                            }
                            return "<span style='color:rgb(0, 0, 255);'>已激活</span>";
                        }
                    }
                ]],
            onBeforeLoad: function(param) {
            },
            onLoadSuccess: function(data) {
                $dataGrid.datagrid("fixRowHeight");
            },
            onLoadError: function() {
            }
        });
    }

    let permissionDataUrl = '/Role/GetMenusByRoleId';
    function InitPermissionTree() {
        let $dataGrid = $('#dgMenu').tree({
            url: permissionDataUrl,
            queryParams : {
                'roleId' : roleId
            },
            method: 'post',
            idField: 'id',
            treeField: 'text',
            striped: true,
            pagination: false,
            fitColumns: false,
            rowNumbers: true,
            singleSelect: true,
            nowrap: false,
            fit: true,
            lines: true,
            showFooter: false,
            checkbox: false,
            checkOnSelect: false,
            cascadeCheck: false,
            columns: [
                [
                    { field: 'text', title: '名称', width: '34%', align: 'left' },
                    { field: 'level', title: '等级', width: '19%', align: 'left' },
                    { field: 'description', title: '描述', width: '45%', align: 'left' }
                ]],
            onBeforeLoad: function(param) {
            },
            onLoadSuccess: function(data) {
                $dataGrid.datagrid("fixRowHeight");
            },
            onLoadError: function() {
            }
        });
    }
</script>
</body>
</html>